/*
 * @Description: 地图选点页面
 * @Author: buwei.huang
 * @Date: 2019-07-09 18:08:34
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-08-25 13:06:57
 */
<template>
  <div id="app">
    <map-draw @noSite="onNoSite" />
    <div class="list_wrap">
      <template v-for="(item,index) in amapInfoList">
        <choose-site-item
          :key="index"
          :item="item"
          :index="index"
          v-if="item"
          :routeType="routeType"
        />
      </template>
      <div
        v-if="noSite"
        class="noData flex-h flex-vc flex-hc"
      >
        附近无可用地点
      </div>
    </div>

  </div>
</template>

<script>

import MapDraw from './components/MapDraw'
import ChooseSiteItem from './components/ChooseSiteItem'
import { getCurrentPosition, getUrlParamByKey } from 'vue-xiaobu-utils'
import { Indicator } from 'mint-ui'

export default {
  name: 'mapChooseSite',
  components: {
    'choose-site-item': ChooseSiteItem,
    'map-draw': MapDraw
  },
  data() {
    return {
      amapInfoList: [],
      routeType: '',
      noSite: false
    }
  },
  computed: {
    currentAmapInfo() {
      return this.$store.getters.amapInfoList
    }
  },
  watch: {
    currentAmapInfo(val) {
      console.log(val)
      let arr = []
      val.map(item => {
        if (item) {
          arr.push(item)
        }
      })
      this.amapInfoList = arr
      console.error(this.amapInfoList)
    }
  },
  mounted: function () {
    this._getCurrentPosition()
    let routeType = getUrlParamByKey('ROUTETYPE')
    if (routeType) {
      this.routeType = this._disposeRoute(routeType)
    }
  },
  methods: {
    async _getCurrentPosition() { // 获取当前gps位置
      try {
        Indicator.open()
        let pos = await getCurrentPosition(this)
        // 更新store中的gps数据
        this.$store.dispatch('fetchPos', pos)
      } catch (err) {
        console.log('获取定位失败1')
      } finally {
        Indicator.close()
      }
    },
    // 处理路由
    _disposeRoute(url) {
      if (url.indexOf('?') > 0) {
        // url包含?则后面添加&
        url += '&'
      } else {
        url += '?'
      }
      return url
    },
    // 列表无数据时显示
    onNoSite(bol) {
      this.noSite = bol
    }
  }
}
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
/* 修复css边距合并带来的问题 */
body {
  position: absolute;
  width: 100%;
}
#app {
  height: 100%;
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

.list_wrap {
  height: 396px;
  overflow-y: auto;
}
.noData {
  width: 100%;
  height: 100%;
  color: #999;
  font-size: 16px; /*no*/
}
</style>
